import { Component } from 'react';
import classNames from 'classnames';
import styles from './CompairMap.less';
import { RadioGroup,Radio } from '@blueprintjs/core';
import Modal from '../../../../components/modals/BaseModal';
import { connect } from 'dva';
import { updateState } from '../../../../models/global';
import {removeFromArray, contain} from '../../../../utils/util';

const MAP_SOURCES = [
    {name: "高德地图", image: './images/logo/gaode.jpg'},
    {name: "百度地图", image: './images/logo/baidu.png'},
    {name: "天地图", image: './images/logo/tianditu.jpg'},
];

export default class CompairMap extends Component {
	constructor(props) {
	    super(props);
		this.state = {
			selected: []
		}
    }

    hasSelected = (source) => {
        const {selected} = this.state;
        return source && contain(selected, source) >= 0;
    }

    removeSelected = (source) => {
        const {selected} = this.state;
        if(source) {
            removeFromArray(selected, source);
            this.setState({selected});
        }
    }

    setSelected = (source) => {
        const {selected} = this.state;
        if(this.hasSelected(source)) {
            this.removeSelected(source)
        } else {
            selected.push(source);
            this.setState({selected});
        }
    }


    render() {
        const {isOpen, handleClose, handleOk} = this.props;
        return  <Modal icon="comparison" title="地图对比"
            className={styles.main}
            isOpen={isOpen}
            handleClose = {handleClose}
            handleOk = {() => {
                const {selected} = this.state;
                updateState({syncMap: null});
                updateState({syncMap: selected.length > 0 ?  selected : null});
                if(selected.length) {
                  updateState({rightPanPosition: 'center'});
                  $('.rightinfo-drag').draggabilly("enable");
                }
                handleOk();
                this.setState({selected: []});
            }}
            >
                <ul className={styles.list}>
                    {
                        MAP_SOURCES.map((source, idx) => {
                            return <li key={idx} onClick={() => {
                                this.setSelected(source.name)
                            }} className={classNames(this.hasSelected(source.name) && styles.selected)}>
                                <div><img src={source.image} /></div>
                                <p>{source.name}</p>
                            </li>
                        })
                    }
                </ul>
        </Modal>
    }
}
